<template>
	<view class="page">
		<view class="nav">
			<view class="nav_right">
				<view class="search" @click="searchinfo">
					<uni-icons class="search_icon" type="search" size="20" color="#B3B3B3"></uni-icons>
					亲！请选择服务哦~！
				</view>
			</view>
			<view class="nav_left">
				<view class="position" @click="positionInfo">
					<uni-icons class="position_icon" type="location-filled" color="#ffffff" size="20"></uni-icons>
					{{currentAddress}}
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="uni-swipe">
			<swiper></swiper>
		</view>
		<!-- 轮播图 end-->
		<view class="main">
			<view class="main_item">
				<view class="fastNavIcon">
					<image src="../../static/img/fastNav-6.png" mode=""></image>
				</view>
				<text>照料护理</text>
			</view>
			<view class="main_item">
				<view class="fastNavIcon">
					<image src="../../static/img/fastNav-7.png" mode=""></image>
				</view>
				<text>卫生保洁</text>
			</view>
			<view class="main_item">
				<view class="fastNavIcon">
					<image src="../../static/img/fastNav-8.png" mode=""></image>
				</view>
				<text>改造维修</text>
			</view>
			<view class="main_item">
				<view class="fastNavIcon">
					<image src="../../static/img/fastNav-9.png" mode=""></image>
				</view>
				<text>生活配送</text>
			</view>
			<view class="main_item">
				<view class="fastNavIcon">
					<image src="../../static/img/fastNav-10.png" mode=""></image>
				</view>
				<text>出门陪护</text>
			</view>
		</view>
		<!-- 通告栏 -->
		<view class="announce">
			<view class="tonggao_icon fl">
				<image src="../../static/img/tonggao_icon.png" mode=""></image>
			</view>
			<view class="notice fl">《臻好办》已上线app！~全新功能！全新的版本！</view>
		</view>
		<!-- 通告栏 end-->

		<!-- 明星师傅组键 -->
		<teacher></teacher>
		<!-- 明星师傅组键 end-->
		<!-- 广告 -->
		<view class="guanggao" v-if="isShow">
			<div class="marquee">
				<div class="marquee_title">
					<span>最新入驻</span>
				</div>
				<div class="marquee_box">
					<ul class="marquee_list" :class="{marquee_top:animate}">
						<li v-for="(item,index) in marqueeList" :key="index">
							<image :src="item.img" mode=""></image> {{item.name}}
						</li>
					</ul>
				</div>
			</div>
		</view>
		<!-- 广告 end-->
		<!-- 优秀机构 -->
		<mechanism></mechanism>
		<!-- 优秀机构 end-->

	</view>
</template>

<script>
	// 调用了轮播图
	import swiper from "@/components/index/swiper/swiper.vue"
	// 调用明星师傅
	import teacher from "@/components/index/teacher/index.vue"
	// 调用优秀机构
	import mechanism from "@/components/index/mechanism/mechanism.vue"
	// 通告栏
	import prelude from "@/components/index/prelude/prelude.vue"
	// 调用侧边抽屉分类列表
	import uniDrawer from '@/components/uni-ui/uni-drawer/uni-drawer.vue'
	export default {
		components: {
			swiper,
			teacher,
			mechanism,
			prelude,
			uniDrawer
		},
		data() {
			return {
				// 通告栏是否显示
				isShow: true,
				animate: false,
				currentAddress: '当前位置',
				// 通过栏的数据
				marqueeList: [{
						id: 1,
						name: "1军电视剧烦恼是的空间开发",
						img: '/static/img/1.jpg'
					},
					{
						id: 2,
						name: "1军电视剧烦恼是的空间开发",
						img: '/static/img/1.jpg'
					},
					{
						id: 3,
						name: "1军电视剧烦恼是的空间开发",
						img: '/static/img/1.jpg'
					},
					{
						id: 4,
						name: "1军电视剧烦恼是的空间开发",
						img: '/static/img/1.jpg'
					},
				],
				// 通告栏的定时器
				settime: "",
				// 显示右边抽屉
				showRight: false,
				// 我的频道列表
				my_channel_list: [],
				// 推荐频道列表,
				recommend_channel_list: [
					"酒类副食", "建筑地产", "老年用品", "家具制造", "金融保险", "消防安防", "家用电器", "厨卫用品", "电子产品", "体育器材", "工程机械", "医疗器械", "油漆涂料", "家装建材",
					"园林绿化", "生态农场", "养殖水产", "农业种植", "旅游景区", "广告传媒", "运输快递",
					"美食餐饮", "宾馆酒店", "服装鞋帽", "药店连锁", "瓜果时疏", "手机通讯", "茶叶茶具", "蛋糕西点", "五金水暖", "瓜果蔬菜", "窗帘门窗", "厨卫用品", "灯具开关", "美发美甲",
					"女性之家", "汽车之家", "生活超市", "茶楼棋牌", "招商展会",
					"家政服务", "养老机构", "按摩足疗", "酒吧娱乐", "教育辅导", "招生招聘", "物业管理", "音乐舞蹈", "体育运动", "中药养生", "健康医疗", "租赁中介", "咨询公司", "公益活动"
				],
				// 频道的节流阀
				isflag: true
			}

		},
		methods: {
			// 定位页面触发
			positionInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success:() => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log(res)
								uni.chooseLocation({
									latitude: res.latitude,
									longitude: res.longitude,
									success: e => {
										this.$set(this.formData, 'lat', e.latitude)
										this.$set(this.formData, 'lng', e.longitude)
										this.$set(this.formData, 'address', e.name)
									},
									fail: function(t) {}
								});
							}
						});
					},
					fail(err) { // 这里用户点取消了
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			// 搜索框跳转
			searchinfo() {
				uni.navigateTo({
					url: '/pages/index/search',
				});
			},
			// 通告栏显示滚动
			showMarquee: function() {
				this.animate = true;
				setTimeout(() => {
					this.marqueeList.push(this.marqueeList[0]);
					this.marqueeList.shift();
					this.animate = false;
				}, 500);
			},
			// 打开侧边抽屉分类列表
			show(e) {
				console.log("show", e);
				if (e === 'left') {
					this.showLeft = true
				} else {
					this.showRight = true
				}
			},
			hide() {
				console.log("hide");
				this.showLeft = false
				this.showRight = false
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.showLeft = false
				} else {
					this.showRight = false
				}
			},
			// confirm() {}
			// 抽屉列表 根据true/false判断 推荐频道添加进我的频道 && 我的频道添加进推荐频道  
			add_channel(flag, e) {
				if (this.isflag) {
					// 将节流阀锁死 
					this.isflag = false
					if (flag) {
						setTimeout(() => {
							// 将选中的目标从推荐频道列表中删除
							this.recommend_channel_list = this.recommend_channel_list.filter(item => item !== e.target.dataset.q)
							// 将删除的元素添加到我的频道中
							this.my_channel_list.push(e.target.dataset.q)
							// 将选择记录存在本机缓存中
							uni.setStorage({
								key: "my_channel_list",
								data: this.my_channel_list
							})
							uni.setStorage({
								key: "recommend_channel_list",
								data: this.recommend_channel_list
							})
							// 执行完一个在打开节流阀
							this.isflag = true
						}, 200)
					} else {
						setTimeout(() => {
							// 将选中的目标从推荐频道列表中删除
							this.my_channel_list = this.my_channel_list.filter(item => item !== e.target.dataset.q)
							// 将删除的元素添加到我的频道中
							this.recommend_channel_list.push(e.target.dataset.q)
							// 将选择记录存在本机缓存中
							uni.setStorage({
								key: "my_channel_list",
								data: this.my_channel_list
							})
							uni.setStorage({
								key: "recommend_channel_list",
								data: this.recommend_channel_list
							})
							// 执行完一个在打开节流阀
							this.isflag = true
						}, 100)
					}
				}
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'my_channel_list',
				success: (res) => {
					console.log(res)
					this.my_channel_list = res.data
				}
			}),
			uni.getStorage({
				key: 'recommend_channel_list',
				success: (res) => {
					this.recommend_channel_list = res.data
				}
			})
			const that = this
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.userLocation']) { //当地址没有授权就会显示弹窗
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								uni.showToast({
									icon: 'none',
									title: '欢迎使用臻好办'
								})
								uni.getLocation({
									type: 'gcj02',
									success: function(res) {
										console.log(res)
										uni.request({
											url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=AVABZ-EIPWP-7RTDK-L6UQ3-SHYET-V5B6V&get_poi=1`,
											method: 'GET',
											success: (res) => {
												console.log(res)
												that.currentAddress = res.data.result.address
											},
											fail: (err) => {
												console.log(err);
											}
										})
									}
								});
							},
							fail(err) { // 这里用户点取消了
								uni.showToast({
									icon: 'none',
									title: '定位失败'
								})
							},
							complete() {
								uni.hideLoading()
							}
						})
					} else {
						uni.hideLoading()
						uni.getLocation({
							type: 'gcj02',
							success: function(res) {
								console.log(res)
								uni.request({
									url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=AVABZ-EIPWP-7RTDK-L6UQ3-SHYET-V5B6V&get_poi=1`,
									method: 'GET',
									success: (res) => {
										console.log(res)
										that.currentAddress = res.data.result.address
									},
									fail: (err) => {
										console.log(err);
									}
								})
							}
						});
						// 已经调用了此方法  所以有了数据
					}
				}
			})
		},
		onShow() {
			// 在页面dom元素搭建完毕时 触发通告栏
			this.settime = setInterval(this.showMarquee, 2000);
		},
		onHide() {
			// 当页面切换/页面隐藏时关闭定时器节约性能
			clearInterval(this.settime)
		}
	}
</script>

<style lang="scss">
	.nav {
		display: flex;
		background-color: #368AFF;
		box-sizing: border-box;
		padding: 20rpx 20rpx;

		.nav_left {
			.position {
				box-sizing: border-box;
				display: flex;
				width: 150rpx;
				height: 70rpx;
				border-radius: 35rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				text-align: center;
				color: #fff;

				.position_icon {
					margin-right: 10rpx;
					vertical-align: middle;
				}
			}
		}

		.nav_right {
			flex: 1;
			margin-right: 30rpx;

			.search {
				box-sizing: border-box;
				width: 100%;
				height: 70rpx;
				border-radius: 35rpx;
				background-color: #FFFFFF;
				color: #B3B3B3;
				line-height: 70rpx;
				margin: 0 10rpx 0 0rpx;
				padding-left: 44rpx;
				font-size: 26rpx;

				.search_icon {
					vertical-align: middle;
				}
			}

		}
	}

	swiper {
		height: auto;
	}

	.uni-swipe {
		width: 100%;
		padding: 25upx 25upx 25upx;
		height: auto;
		box-sizing: border-box;
		overflow: hidden;
	}

	.main {
		display: grid;
		grid-template-columns: repeat(5, auto);
		grid-template-rows: repeat(5, auto);
		justify-items: center;
		padding: 50rpx 0 0;
		background: #fff;

		.main_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 50rpx;

			.fastNavIcon {
				width: 80rpx;
				height: 80rpx;
				margin: 0px auto 25rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			text {
				line-height: 100%;
				font-size: 26rpx;
			}
		}
	}

	.announce {
		grid-template-areas: "image text";
		box-sizing: border-box;
		width: 100%;
		height: 84rpx;
		padding: 0 25rpx;
		line-height: 84rpx;

		.tonggao_icon {
			width: 36rpx;
			height: 84rpx;
			margin-right: 20rpx;
			line-height: 84rpx;
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 32rpx;
			}
		}

		view {
			font-size: 24rpx;
		}
	}

	// 通告栏
	.guanggao {
		margin-top: 16rpx;
		width: 750rpx;

		.marquee {
			width: 100%;

			height: 50px;

			align-items: center;

			color: #3a3a3a;

			background-color: white;

			display: flex;

			box-sizing: border-box;

			overflow: hidden;
		}

		.marquee_title {
			padding: 0 20px;

			height: 21px;

			font-size: 14px;

			border-right: 1px solid #d8d8d8;

			align-items: center;
		}

		.marquee_box {
			display: block;

			position: relative;

			width: 60%;

			height: 30px;

			overflow: hidden;
		}

		.marquee_list {
			display: block;

			position: absolute;

			top: 0;

			left: 0;

			image {
				width: 45rpx;
				height: 45rpx;
				border-radius: 30rpx;
				vertical-align: middle;
				margin-right: 10rpx;
				margin-bottom: 8rpx;

			}
		}

		.marquee_top {
			transition: all 0.5s;
			margin-top: -30px;
		}

		.marquee_list li {
			height: 30px;

			line-height: 30px;

			font-size: 14px;

			padding-left: 20px;
		}

		.marquee_list li span {
			padding: 0 2px;
		}
	}

	// 侧边抽屉分类列表
	@import '@/common/uni-nvue.scss';

	.header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		border-top-width: 1px;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		background-color: #ffffff;
	}

	.input-view {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
		background-color: #f5f5f5;
	}

	.uni-drawer-info {
		background-color: #ffffff;
		padding: 30rpx;
		padding-top: 10rpx;
		color: #3b4144;
	}

	.uni-padding-wrap {
		padding: 0 15px;
		line-height: 1.8;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: $uni-font-size-base;
		background-color: transparent;
	}

	.close {
		padding: 30rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.draw-cotrol-btn {
		flex: 1;
	}

	//定义抽屉内容
	.channel_list {
		.my_channel_content {
			.my_channel_title {
				width: 100%;
				font-size: 38rpx;
				font-weight: 600;
				text-align: center;
				margin-top: 20rpx;
			}

			.my_channel_box {
				margin-top: 20rpx;

				.my_channel_box_item {
					display: inline-block;
					font-size: 10px;
					border: 2rpx #FC503E solid;
					padding: 10rpx 0;
					border-radius: 10rpx;
					background-color: #f7f7f7;
					margin-bottom: 10rpx;
					padding-left: 18rpx;
					margin-left: 21rpx;

					.my_channel_box_item_icon {
						margin-left: 6rpx;
						margin-right: 10rpx;
						vertical-align: bottom;
					}
				}
			}
		}

		.recommend_channel_content {
			.recommend_channel_title {
				width: 100%;
				font-size: 38rpx;
				font-weight: 600;
				text-align: center;
				margin-top: 20rpx;
			}

			.recommend_channel_box {
				margin-top: 20rpx;

				.recommend_channel_box_item {
					display: inline-block;
					font-size: 10px;
					border: 2rpx #efeff4 solid;
					border-radius: 10rpx;
					background-color: #f7f7f7;
					padding: 12rpx 0;
					margin-bottom: 10rpx;
					padding-left: 18rpx;
					margin-left: 21rpx;


					.recommend_channel_box_item_icon {
						margin-left: 6rpx;
						margin-right: 10rpx;
						vertical-align: bottom;
					}
				}
			}

		}

		.channel-btn {
			background-color: #FC503E;
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.channel_active {
		color: #fc503e;
	}

	.my_channel_active {
		border: 2rpx #efeff4 solid !important;

	}
</style>
